import React from 'react';
import { Divider, Input, Form, Popconfirm, Tooltip } from 'antd';
import cn from 'classnames';
import styles from './index.less';

const CustomAdd = ({ value, form, onChange, disabled, ...rest }) => {
    const { getFieldDecorator, getFieldValue, setFieldsValue, validateFields } = form;
    const handleChange = sort => {
        onChange([
            ...value.slice(0, sort),
            {
                question: value[sort].question,
                sort: '',
                edit: true,
                id: value[sort].id,
                quesType: 'self'
            },
            ...value.slice(sort + 1)
        ]);
    };
    const handleDelete = sort => {
        const lists = getFieldValue('interviewQuestion');
        // eslint-disable-next-line guard-for-in,no-restricted-syntax
        for (const index in lists) {
            const nIndex = Number(index);
            if (nIndex >= sort && lists[nIndex + 1]) {
                setFieldsValue({
                    [`interviewQuestion[${nIndex}]`]: lists[nIndex + 1]
                });
            }
        }
        const newValue = [...value.slice(0, sort), ...value.slice(sort + 1)].map((item, index) => ({
            question: item.question,
            sort: index + 1,
            edit: item.edit,
            id: item.id,
            quesType: item.quesType
        }));
        onChange(newValue);
    };
    const handleAddInput = sort => {
        validateFields([`interviewQuestion[${sort}].title`], err => {
            if (!err) {
                const newValue = [
                    ...value.slice(0, sort),
                    {
                        question: getFieldValue(`interviewQuestion[${sort}].title`),
                        sort: '',
                        edit: false,
                        id: value[sort].id,
                        quesType: 'self'
                    },
                    ...value.slice(sort + 1)
                ].map((item, index) => ({
                    ...item,
                    sort: index + 1
                }));
                onChange(newValue);
                validateFields(['interviewQuestions']);
            }
        });
    };
    const handleCancel = (sort, text) => {
        if (text) {
            onChange([
                ...value.slice(0, sort),
                {
                    question: value[sort].question,
                    sort: '',
                    edit: false,
                    id: value[sort].id,
                    quesType: 'self'
                },
                ...value.slice(sort + 1)
            ]);
        } else {
            handleDelete(sort);
        }
    };
    const handleAddPanel = () => {
        onChange([
            ...value,
            {
                question: '',
                sort: '',
                edit: true,
                id: '',
                quesType: 'self'
            }
        ]);
    };
    const changeShow = (item, index) => {
        const self = !disabled ? (
            <>
                <i
                    onClick={() => {
                        handleChange(index);
                    }}
                    className={cn('iconfont iconlistfunction_edit_icon_default', styles.iconHover)}
                />
                <Divider type="vertical" />
                <Popconfirm
                    title="确定是否删除?"
                    onConfirm={() => {
                        handleDelete(index);
                    }}
                >
                    <i className={cn('iconfont iconDeleteIcon', styles.iconCursor, styles.deleteIcon)} />
                </Popconfirm>
            </>
        ) : null;
        return (
            <div className={styles.Right}>
                {item.quesType === 'self' ? (
                    self
                ) : (
                    <span className={styles.createUser}>
                        {item.createUserName || item?.createUserInfo?.employeeName}
                    </span>
                )}
            </div>
        );
    };

    return (
        <>
            {value.map((item, index) => (
                <div>
                    <Form.Item>
                        {getFieldDecorator(`interviewQuestion[${index}].hide`)(
                            <div className={cn(styles.panel, item.edit ? styles.flexAlign : null)} {...rest}>
                                <span style={{ lineHeight: '24px' }}>{index + 1}</span>
                                {!item.edit ? (
                                    <>
                                        <span className={styles.question}>{item.question}</span>
                                        {changeShow(item, index)}
                                    </>
                                ) : (
                                    <div className={styles.inputView}>
                                        <Form.Item label="" required>
                                            {getFieldDecorator(`interviewQuestion[${index}].title`, {
                                                initialValue:
                                                    item.question || getFieldValue(`interviewQuestion[${index}].hide`),
                                                rules: [
                                                    { required: true, message: '请输入自定义问题标题!' },
                                                    { max: 100, message: '自定义问题不能超过100个字符' }
                                                ]
                                            })(<Input style={{ marginLeft: '8px', width: '600px' }} />)}
                                        </Form.Item>
                                        <div className={styles.action}>
                                            <Tooltip placement="top" title="取消">
                                                <i
                                                    className={cn('iconfont iconcancel_o', styles.iconHover)}
                                                    onClick={() => {
                                                        handleCancel(index, item.question);
                                                    }}
                                                />
                                            </Tooltip>
                                            <Tooltip placement="top" title="确定">
                                                <i
                                                    className={cn('iconfont iconconfirm_o', styles.iconHover)}
                                                    onClick={() => {
                                                        handleAddInput(index);
                                                    }}
                                                />
                                            </Tooltip>
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}
                    </Form.Item>
                </div>
            ))}

            {!disabled && (
                <div
                    className={styles.add}
                    onClick={() => {
                        handleAddPanel();
                    }}
                >
                    +添加问题
                </div>
            )}
        </>
    );
};

export default CustomAdd;
